<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素和内联元素</title>

    <style type="text/css">

        /*
            标签选择器
        */
        p{
            background-color: red;
        }

        /*
            id选择器
        */

        #p1 {
            font-size: 26px;
        }

        /*
           类选择器:
           class属性和id属性类似，只不过class属性可以重复
           拥有相同class属性值的元素，我们说他们是一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开,
           表示当前元素既属于p2 又属于p3
        */
        .p2 {
            font-size: 13px;
        }
        .p3 {
            background-color: blue;
        }

        /*
            选择器分组：
                通过选择器分组可以同时选中多个选择器对应的元素

                为id为p1和class为p2，还有h2标签 设置一个字体大小为32号字
        */
        #p1, .p2, h2 {
            font-size: 32px;
        }

        /*
            通配选择器：
                它可以用来选中页面中的所有元素
        */
        * {
            font-size: 18px;
        }

        /*
            为拥有class属性值为p4的span元素，单独设置一个样式

            使用交集选择器（复合选择器）既：同时满足两个条件 拥有class属性为p4 且标签名称为span ,这个就像数学中学到的 且的关系

            语法：
                选择器1选择器2选择器n{}
        */
        span.p4{
            background-color: bisque;
        }


    </style>
</head>
<body>

    <h2>悯农</h2>
    <p id="p1">锄禾日当午</p>
    <p class="p2 p3">汗滴禾下土</p>
    <p class="p2">谁知盘中餐</p>
    <p>粒粒皆辛苦</p>

    <p class="p4">斗破苍穹</p>
    <span class="p4">天蚕土豆</span>
</body>
</html>